<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="js/vue.js"></script>
    <title>Page Title</title>
</head>
<body>
    <div id="app1">
        {{test}}
    </div>
    <script>
        var app1 = new Vue({
            el:"#app1",
            data:{
                test:"aaaa"
            },
            beforeCreate() {
                console.log("--------创建之前-------");
                console.log("此时的$data是---->" + this.$data);
                console.log("此时的test是---->" + this.test);
                console.log("此时的$el是---->" + this.$el);
            },
            created() {
                console.log("--------创建之后-------");
                console.log("此时的$data是---->" + this.$data);
                console.log("此时的test是---->" + this.test);
                console.log("此时的$el是---->" + this.$el);
            },
            beforeMount() {
                console.log("--------挂载之前-------");
                console.log("此时的$data是---->" + this.$data);
                console.log("此时的test是---->" + this.test);
                console.log("此时的$el是---->" + this.$el);
            },
            mounted() {
                console.log("--------挂载之后-------");
                console.log("此时的$data是---->" + this.$data);
                console.log("此时的test是---->" + this.test);
                console.log("此时的$el是---->" + this.$el);
            },
            beforeUpdate() {
                console.log("--------更新之前-------");
                console.log("此时的$data是---->" + this.$data);
                console.log("此时的test是---->" + this.test);
                console.log("此时的$el是---->" + this.$el);
            },
        })
    </script>
</body>
</html>